<template>
  <div class="q-pa-md">
    <t-layout
      view="lhh LpR lff"
      container
      style="height: 500px"
      class="shadow-2 rounded-borders"
    >
      <t-page-container>
        <t-page padding>
          <p v-for="n in 15" :key="n">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil
            praesentium molestias a adipisci, dolore vitae odit, quidem
            consequatur optio voluptates asperiores pariatur eos numquam rerum
            delectus commodi perferendis voluptate?
          </p>

          <t-page-sticky position="bottom-right" :offset="fabPos">
            <t-fab
              icon="add"
              direction="up"
              color="accent"
              :disable="draggingFab"
              v-touch-pan.prevent.mouse="moveFab"
            >
              <t-fab-action
                @click="onClick"
                color="primary"
                icon="person_add"
                :disable="draggingFab"
              />
              <t-fab-action
                @click="onClick"
                color="primary"
                icon="mail"
                :disable="draggingFab"
              />
            </t-fab>
          </t-page-sticky>
        </t-page>
      </t-page-container>
    </t-layout>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      const fabPos = ref([18, 18]);
      const draggingFab = ref(false);

      return {
        fabPos,
        draggingFab,

        onClick() {
          // console.log('Clicked on a fab action')
        },

        moveFab(ev) {
          draggingFab.value = ev.isFirst !== true && ev.isFinal !== true;

          fabPos.value = [
            fabPos.value[0] - ev.delta.x,
            fabPos.value[1] - ev.delta.y,
          ];
        },
      };
    },
  };
</script>
